<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <h3 class="form-setting-panel-title">{{field.displayName}}</h3>   
    <!-- end 标题 -->
    <p class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</p>
    <h3>{{$t('common.base.concatOption')}}</h3>
    <div class="form-setting-group">
      <el-checkbox v-model="customerOption.address">{{mode == "product" ? $t('common.form.preview.customer.customerAddressLabel') : $t('common.form.preview.customer.addressLabel')}}</el-checkbox>
      <el-checkbox v-model="customerOption.linkman">{{$t('common.form.preview.customer.linkmanLabel')}}</el-checkbox>
      <el-checkbox v-model="customerOption.product">{{$t('common.form.preview.customer.productLabel')}}</el-checkbox>
      <el-checkbox v-model="customerOption.productNotNull" :disabled="!customerOption.product">{{$t('common.form.preview.customer.productIsRequire')}}</el-checkbox>
    </div>
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting'
import { settingProps } from '@src/component/form/components/props';

export default {
  name: 'form-customer-setting',
  mixins: [SettingMixin],
  props: settingProps,
  computed: {
    customerOption() {
      return this.field.setting.customerOption || {}
    }
  },
  methods: {
    updateForDom(event) {
      let el = event.target
      let prop = el.dataset.prop
      let value = el.value
      this.update(value, prop)
    },
    update(value, prop) {
      this.$emit('input', { value, prop })
    }
  }
}
</script>